import React from 'react';
import {
    View,
    Image,
    Text,
    TouchableHighlight,
    StyleSheet
} from 'react-native';
import { MarqueeHorizontal,MarqueeVertical } from 'react-native-marquee-ab';
import { screen } from '../../public/common';
import color from '../../public/widget/color';
export default class SwiperFirst extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            imgList:[
                {txt:'登录成功有机会获得一千元免息券'},
                {txt:'现在登录享受极速服务、拿钱更快'},
            ]
        }
    }
    render() {
        let {imgList} = this.state;
        return (
            <View style={{height:100,marginTop:50,backgroundColor:'#fff',flexDirection:'row',justifyContent:'center',borderRadius:5}}>
                {/* <Swiper
                    style={styles.wrapper}
                    autoplayTimeout={2.5}
                    showsButtons={false}// showButtons —— 是否显示左右翻页按钮
                    autoplay={true}//—— 是否自动播放
                    paginationStyle={{bottom: 10}}
                    dotStyle={styles.dotStyle}// dotStyle —— 小点点的样式
                    activeDotStyle={styles.activeDotStyle} // activeDotStyle —— 当前被激活的小点点的样式
                >
                    {imgList.map((item,i)=>(
                        <TouchableHighlight key={i} onPress={()=>{}}>
                            <View style={styles.bannerImg}><Text style={styles.title}>{item.txt}</Text></View>
                        </TouchableHighlight>
                    ))}
                </Swiper> */}
                <MarqueeVertical
                    style={{borderRadius:10}}
                    textList = {[
                        {label : '1',value : '登录成功有机会获得一千元免息券'},
                        {label : '2',value : '现在登录享受极速服务、拿钱更快'},
                        {label : '3',value : '登录成功尽享会员专属福利'},
                    ]}
                    height = {50}
                    width={300}
                    direction = {'up'}
                    numberOfLines = {1}
                    bgContainerStyle = {{backgroundColor:'#f1f1f1'}}
                    textStyle = {{fontSize : 16,fontWeight:'bold',textAlign:'center',color : '#fb6c03'}}
                />
            </View>)
    }
}
const styles = StyleSheet.create({
    wrapper: {
        width:screen.width,
    },
    bannerImg: {
        width:screen.width-40,
        marginLeft:20,
        backgroundColor: "#fff",
        alignItems: 'center',
        marginTop: 30,

        shadowColor:'#fb6c03',
        shadowOffset:{h:10,w:10},
        shadowOpacity:0.8,
        shadowRadius:3,
        //注意：这一句是可以让安卓拥有灰色阴影
        elevation: 4,
        paddingTop: 10,
        paddingBottom: 10,
        borderRadius: 10,
    },
    dotStyle: {
        width: 0,
        height: 0,
        backgroundColor:color.gray,
        opacity: 0.4,
        borderRadius: 5,
    },
    activeDotStyle: {
        width: 0,
        height: 0,
        backgroundColor:'#000',
        borderRadius: 5,
    },
    title:{
        fontSize:16,
        textAlign:'center',
        color:'#fb6c03',
    }
});